<template>
  <div class="container">
    <div class="header">
      <el-form ref="form" :model="form">
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="20">
            <el-row type="flex" justify="start" :gutter="20">
              <el-col :span="5">
                <el-form-item prop="complainType">
                  <el-select v-model="form.complainType" class="select">
                    <template #prefix>
                      <div class="select-prefix">投诉类型：</div>
                    </template>
                    <el-option
                      v-for="item in complainTypeList"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="complainHandleStatus">
                  <el-select v-model="form.complainHandleStatus" class="select">
                    <template #prefix>
                      <div class="select-prefix">处理状态：</div>
                    </template>
                    <el-option
                      v-for="item in complainHandleStatusList"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="complainDate">
                  <el-date-picker
                    v-model="form.complainDate"
                    class="date-picker"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="选择日期"
                    end-placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <div class="btn-group">
              <el-button class="query" @click="getComplainList">查询</el-button>
              <el-button plain class="clear" @click="resetForm">清空</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content">
      <div class="table-header">
        <span class="left">列表</span>
        <div class="right">
          <el-button type="primary" icon="el-icon-download" class="export" @click="exportFile">导出</el-button>
          <el-button icon="el-icon-refresh-right" class="refresh" @click="getComplainList">刷新</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table
          :data="complainList"
          :header-cell-style="headerCellStyle"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center">
          </el-table-column>
          <el-table-column
            prop="complainName"
            min-width="150"
            label="投诉人">
          </el-table-column>
          <el-table-column
            prop="complainPhone"
            min-width="150"
            label="手机号码">
          </el-table-column>
          <el-table-column
            prop="handleComplainType"
            min-width="160"
            label="投诉类型">
            <template slot-scope="scope">
              {{ getHandleComplainType(scope.row.type) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            min-width="150"
            label="投诉时间">
          </el-table-column>
          <el-table-column
            prop="handleStatus"
            min-width="150"
            label="处理状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.handleStatus === '0'" type="success" class="tag">
                <i class="el-icon-loading"></i>
                待处理
              </el-tag>
              <el-tag v-else-if="scope.row.handleStatus === '1'" class="tag business">
                <i class="el-icon-success"></i>
                已处理
              </el-tag>
              <el-tag v-else-if="scope.row.handleStatus === '2'" class="tag follow-up">
                <i class="el-icon-success"></i>
                需跟进
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="handleTime"
            min-width="150"
            label="处理时间">
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="180"
            align="center"
            fixed="right">
            <template slot-scope="scope">
              <el-link :type="scope.row.handleStatus === '1' ? 'info' : 'primary'" :disabled="scope.row.handleStatus === '1'" class="process" @click="processComplain(scope.row)">处理</el-link>
              <el-link type="success" class="look" @click="lookComplain(scope.row)">查看</el-link>
              <el-link type="warning" class="delete" @click="delComplain(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <span>总共 {{pageTotal}} 条</span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @prev-click="handlePrevClick"
            @next-click="handleNextClick"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="prev, pager, next, sizes"
            :total="pageTotal">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 查看 -->
    <el-dialog title="查看" width="50%" :visible.sync="look.visible">
      <div class="title">
        <div class="icon"></div>
        <div class="desc">基本信息</div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">处理状态<span>*</span></div>
          <el-tag v-if="look.complain.handleStatus === '0'" type="success" class="tag">
            <i class="el-icon-loading"></i>
            待处理
          </el-tag>
          <el-tag v-else-if="look.complain.handleStatus === '1'" class="tag business">
            <i class="el-icon-success"></i>
            已处理
          </el-tag>
          <el-tag v-else-if="look.complain.handleStatus === '2'" class="tag follow-up">
            <i class="el-icon-success"></i>
            需跟进
          </el-tag>
        </div>
        <div class="right">
          <div class="label">投诉人<span>*</span></div>
          <el-input v-model="look.complain.complainName" readonly></el-input>
        </div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">手机号码<span>*</span></div>
          <el-input v-model="look.complain.complainPhone" readonly></el-input>
        </div>
        <div class="right">
          <div class="label">投诉类型<span>*</span></div>
          <el-input :value="getHandleComplainType(look.complain.type)" readonly></el-input>
        </div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">投诉时间<span>*</span></div>
          <el-input v-model="look.complain.createTime" readonly></el-input>
        </div>
        <div class="right">
          <div class="label">投诉对象<span>*</span></div>
          <el-input v-model="look.complain.complainFor" readonly></el-input>
        </div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">具体描述</div>
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="look.complain.complainReason" readonly></el-input>
        </div>
        <div class="right">
          <div class="label">图片</div>
          <el-image :src="look.complain.complainImg" mode="contain"></el-image>
        </div>
      </div>
      <div class="title">
        <div class="icon"></div>
        <div class="desc">处理进度</div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">投诉种类<span>*</span></div>
          <el-input v-model="look.complain.handleComplainType === '0' ? '无理投诉' : '有理投诉'" readonly></el-input>
        </div>
        <div class="right">
          <div class="label">是否回访<span>*</span></div>
          <el-input v-model="look.complain.handleReturnVisit === '0' ? '未回访' : '已回访'" readonly></el-input>
        </div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">备注<span>*</span></div>
          <el-input v-model="look.complain.handleRemark" readonly></el-input>
        </div>
        <div class="right">
          <div class="label">处理结果<span>*</span></div>
          <el-input v-model="look.complain.handleResult === '0' ? '满意' : look.complain.handleResult === '1' ? '一般' : '不满意'" readonly></el-input>
        </div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">是否需要再次处理<span>*</span></div>
          <el-input v-model="look.complain.handleNeedAgain === '0' ? '不需要' : '需要'" readonly></el-input>
        </div>
        <div class="right"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="look.visible = false">返回</el-button>
      </div>
    </el-dialog>
    <!-- 处理 -->
    <el-dialog title="处理" width="40%" :visible.sync="process.visible">
      <div class="title">
        <div class="icon"></div>
        <div class="desc">基本信息</div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">投诉种类<span>*</span></div>
          <div class="content">
            <div class="choose_item pointer" @click="process.complain.handleComplainType = '1'">
              <img v-if="process.complain.handleComplainType === '1'" src="@/assets/images/selected_circle.png" alt="">
              <img v-else src="@/assets/images/un_selected_circle.png" alt="">
              <span :class="{ active: process.complain.handleComplainType === '1' }">有理投诉</span>
            </div>
            <div class="choose_item pointer" @click="process.complain.handleComplainType = '0'">
              <img v-if="process.complain.handleComplainType === '0'" src="@/assets/images/selected_circle.png" alt="">
              <img v-else src="@/assets/images/un_selected_circle.png" alt="">
              <span :class="{ active: process.complain.handleComplainType === '0' }">无理投诉</span>
            </div>
          </div>
        </div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">是否回访<span>*</span></div>
          <div class="content">
            <div class="choose_item pointer" @click="process.complain.handleReturnVisit = '1'">
              <img v-if="process.complain.handleReturnVisit === '1'" src="@/assets/images/selected_circle.png" alt="">
              <img v-else src="@/assets/images/un_selected_circle.png" alt="">
              <span :class="{ active: process.complain.handleReturnVisit === '1' }">已回访</span>
            </div>
            <div class="choose_item pointer" @click="process.complain.handleReturnVisit = '0'">
              <img v-if="process.complain.handleReturnVisit === '0'" src="@/assets/images/selected_circle.png" alt="">
              <img v-else src="@/assets/images/un_selected_circle.png" alt="">
              <span :class="{ active: process.complain.handleReturnVisit === '0' }">未回访</span>
            </div>
          </div>
        </div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">备注<span>*</span></div>
          <el-input v-model="process.complain.handleRemark"></el-input>
        </div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">处理结果<span>*</span></div>
          <div class="content">
            <div class="choose_item pointer" @click="process.complain.handleResult = '0'">
              <img v-if="process.complain.handleResult === '0'" src="@/assets/images/selected_circle.png" alt="">
              <img v-else src="@/assets/images/un_selected_circle.png" alt="">
              <span :class="{ active: process.complain.handleResult === '0' }">满意</span>
            </div>
            <div class="choose_item pointer" @click="process.complain.handleResult = '1'">
              <img v-if="process.complain.handleResult === '1'" src="@/assets/images/selected_circle.png" alt="">
              <img v-else src="@/assets/images/un_selected_circle.png" alt="">
              <span :class="{ active: process.complain.handleResult === '1' }">一般</span>
            </div>
            <div class="choose_item pointer" @click="process.complain.handleResult = '2'">
              <img v-if="process.complain.handleResult === '2'" src="@/assets/images/selected_circle.png" alt="">
              <img v-else src="@/assets/images/un_selected_circle.png" alt="">
              <span :class="{ active: process.complain.handleResult === '2' }">不满意</span>
            </div>
          </div>
        </div>
      </div>
      <div class="formItem">
        <div class="left">
          <div class="label">是否需要再次处理<span>*</span></div>
          <div class="content">
            <div class="choose_item pointer" @click="process.complain.handleNeedAgain = '1'">
              <img v-if="process.complain.handleNeedAgain === '1'" src="@/assets/images/selected_circle.png" alt="">
              <img v-else src="@/assets/images/un_selected_circle.png" alt="">
              <span :class="{ active: process.complain.handleNeedAgain === '1' }">需要</span>
            </div>
            <div class="choose_item pointer" @click="process.complain.handleNeedAgain = '0'">
              <img v-if="process.complain.handleNeedAgain === '0'" src="@/assets/images/selected_circle.png" alt="">
              <img v-else src="@/assets/images/un_selected_circle.png" alt="">
              <span :class="{ active: process.complain.handleNeedAgain === '0' }">不需要</span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="process.complain.handleNeedAgain !== '1'" type="primary" style="background: #3370FF"  @click="complainHandle">确定</el-button>
        <el-button v-else @click="complainHandle">再次处理</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {complainDel, complainHandle, exportHandle, getComplainList} from "@/api/form/complain";
import {getDicts} from "@/api/system/dict/data";
import moment from "moment/moment";
import {downloadFile} from "@/utils";

export default {
  async mounted() {
    // 获取投诉类型
    await this.getComplainTypeList()
    // 获取投诉处理状态
    await this.getComplainHandleStatusList()
    // 获取投诉列表
    await this.getComplainList()
  },
  data () {
    return {
      form: {
        complainType: '',
        complainHandleStatus: '',
        complainDate: ''
      },
      complainTypeList: [],
      complainHandleStatusList: [],
      complainList: [],
      currentPage: 1,
      pageSize: 10,
      pageTotal: 0,
      look: {
        visible: false,
        complain: {}
      },
      process: {
        visible: false,
        complain: {}
      }
    }
  },
  computed: {
    headerCellStyle () {
      return {'font-size': '16px','font-weight': 400,color: '#999999',background: '#fff'}
    }
  },
  methods: {
    async exportFile() {
      const complainDate = this.form.complainDate || ''
      let [beginCreateTime, endCreateTime] = complainDate
      if (beginCreateTime) {
        beginCreateTime = moment(beginCreateTime).format('YYYY-MM-DD')
      }
      if (endCreateTime) {
        endCreateTime = moment(endCreateTime).format('YYYY-MM-DD')
      }
      const { code, data, msg } = await exportHandle({
        beginCreateTime,
        endCreateTime,
        type: this.form.complainType,
        handleStatus: this.form.complainHandleStatus,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      })
      if (code !== 200) {
        this.$message({ message: msg, type: 'error' })
        return
      }
      downloadFile(data, '投诉列表')
      this.$message({ message: '已导出', type: 'success' })
    },
    async getComplainHandleStatusList() {
      const { code, data } = await getDicts('complain_handle_status')
      if (code === 200) {
        this.complainHandleStatusList = data
      }
    },
    async getComplainTypeList() {
      const { code, data } = await getDicts('complain_type')
      if (code === 200) {
        this.complainTypeList = data
      }
    },
    async getComplainList() {
      const complainDate = this.form.complainDate || ''
      let [beginCreateTime, endCreateTime] = complainDate
      if (beginCreateTime) {
        beginCreateTime = moment(beginCreateTime).format('YYYY-MM-DD')
      }
      if (endCreateTime) {
        endCreateTime = moment(endCreateTime).format('YYYY-MM-DD')
      }
      const { code, data, msg } = await getComplainList({
        beginCreateTime,
        endCreateTime,
        type: this.form.complainType,
        handleStatus: this.form.complainHandleStatus,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      })
      if (code === 200) {
        this.complainList = data.rows
        this.pageTotal = data.total
      } else {
        this.$message({message: msg, type: 'error'})
      }
    },
    getHandleComplainType (type) {
      const complain = this.complainTypeList.find(item => item.dictValue === type)
      if (!complain) return '-'
      return complain.dictLabel
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    async delComplain(complainId) {
      const { code, msg } = await complainDel(complainId)
      if (code === 200) {
        this.$message({message: '已删除', type: 'success'})
        this.complainList = this.complainList.filter(item => item.id !== complainId)
      } else {
        this.$message({message: msg, type: 'error'})
      }
    },
    lookComplain (complain) {
      this.look.complain = complain
      this.look.visible = true;
    },
    processComplain (complain) {
      this.process.complain = complain
      this.process.visible = true;
    },
    async complainHandle () {
      const { handleComplainType, handleNeedAgain, handleRemark, handleResult, handleReturnVisit, id } = this.process.complain
      const { code, msg } = await complainHandle({
        handleComplainType,
        handleNeedAgain,
        handleRemark,
        handleResult,
        handleReturnVisit,
        id
      })
      if (code === 200) {
        this.$message({message: '已处理', type: 'success'})
        this.process.visible = false
        await this.getComplainList()
      } else {
        this.$message({message: msg, type: 'error'})
      }
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.getComplainList()
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getComplainList()
    },
    handlePrevClick (currentPage) {
      this.currentPage = currentPage
      this.getComplainList()
    },
    handleNextClick (currentPage) {
      this.currentPage = currentPage
      this.getComplainList()
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  background-color: var(--theme_bg_color);
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 15px 15px 15px 25px;
    margin-bottom: 16px;

    ::v-deep .el-form-item {
      margin-bottom: 0 !important;
    }

    .btn-group {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .query {
        width: 72px;
        height: 32px;
        background: #3370FF;
        border: none;
        color: #ffffff;
      }

      .clear {
        width: 72px;
        height: 32px;
      }
    }
    .select {
      height: 32px;
      width: 100%;
      margin-right: 16px;
      ::v-deep .el-input--prefix .el-input__inner {
        padding-left: 81px;
      }
    }
    .select-prefix {
      font-size: 14px;
      font-weight: 400;
      color: #8F959E;
      line-height: 36px;
    }
    .date-picker {
      height: 36px;
      width: 100%;
    }
  }
  .content {
    flex: 1;
    width: 100%;
    position: relative;
    .table-header {
      padding: 10px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #E4E7ED;
      background-color: #fff;
      .left {
        font-size: 16px;
        font-weight: 400;
        color: #111111;
      }
      .right {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .export {
          background: #79CF1C;
          border: none;
        }
      }
    }
    .table-box {
      width: 100%;
      position: absolute;
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 10px 0;
      background-color: #fff;
      span {
        font-size: 5rpx;
      }
    }
    .look {
      margin: 0 20px;
    }
  }
}
.tag {
  width: 74px;
  height: 24px;
  border-radius: 2px 2px 2px 2px;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  i {
    margin-right: 5px;
  }
}
.business {
  background: #D6E2FF;
  color: #245BDB;
}
.follow-up {
  background: #FDE9E8;
  color: #F54A45;
}
.title {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  .icon {
    width: 4px;
    height: 16px;
    background: #3370FF;
    margin-right: 10px;
  }
  .desc {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
  }
}
.formItem {
  width: 100%;
  display: flex;
  margin-bottom: 24px;
  .left, .right {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .left {
    margin-right: 12px;
  }
  .right {
    margin-left: 12px;
    img {
      width: 88px;
      height: 88px;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #D0D3D6;
    }
  }
  .label {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 20px;
    span {
      color: #F54A45;
    }
  }
  .content {
    display: flex;
    align-items: center;
    .choose_item {
      margin-right: 30px;
      display: flex;
      align-items: center;
      .active {
        color: #3370FF;
      }
      img {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }
      span {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
      }
    }
  }
}
</style>
